<!--
 * @Author: ykp 501436989@qq.com
 * @Date: 2025-05-03 10:18:41
 * @LastEditors: ykp 501436989@qq.com
 * @LastEditTime: 2025-08-14 15:59:33
 * @FilePath: \vue-ts\src\views\todolist\components\fromitem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog v-model="dialogTableVisible" :title="isAbb ? '新增' : '编辑'" width="900">
    <el-form ref="ruleFormRef" :rules="rules" label-width="auto" :inline="true" :model="form">
      <el-form-item label="任务标题" prop="title" :label-width="formLabelWidth">
        <el-input v-model="form.title" style="width: 250px" :maxlength="50" placeholder="输入任务标题" autocomplete="off" />
      </el-form-item>
      <el-form-item label="任务类型" prop="type" :label-width="formLabelWidth">
        <el-select style="width: 250px" v-model="form.type" placeholder="输入任务类型">
          <el-option v-for="(item) in taskCategory" :label="item.label" :value="item.id" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="starTime" :label-width="formLabelWidth">
        <el-date-picker style="width: 250px" v-model="form.starTime" type="date" placeholder="选择开始时间"
          format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="预计完成时间" prop="time" :label-width="formLabelWidth">
        <el-date-picker style="width: 250px" v-model="form.time" type="date" placeholder="选择预计完成时间" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="预估人天" prop="manDay" :label-width="formLabelWidth">
        <el-input v-model="form.manDay" style="width: 250px" :maxlength="50" placeholder="请输入预估人天" autocomplete="off" />
      </el-form-item>
      <el-form-item label="任务执行人" prop="executor" :label-width="formLabelWidth">
        <el-input v-model="form.executor" style="width: 250px" :maxlength="50" placeholder="请输入任务执行人"
          autocomplete="off" />
      </el-form-item>
      <el-form-item label="任务紧急程度" prop="importance" :label-width="formLabelWidth">
        <el-select style="width: 250px" v-model="form.importance" placeholder="选择任务紧急程度">
          <el-option v-for="(item) in urgencyList" :label="item.label" :value="item.id" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="任务情况总结" prop="summary" :label-width="formLabelWidth">
        <el-input v-model="form.summary" style="width: 680px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
          :maxlength="200" placeholder="请输入任务情况总结" autocomplete="off" />
      </el-form-item>
      <el-form-item v-if="!isAbb" label="任务状态" prop="packetType" :label-width="formLabelWidth">
        <el-select style="width: 250px" v-model="form.packetType" placeholder="输入任务类型">
          <el-option v-for="(item) in taskStatus" :label="item.label" :value="item.id" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="!isAbb" label="进度" prop="progress" :label-width="formLabelWidth">
        <el-slider style="width: 250px" v-model="form.progress" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import type { cardType ,ListType} from "@/type/todolist/card"; //引入ts类型定义
import { uuid } from "../js/uuid.js"; //uuid 生成方法
// import { urgencyList, taskCategory, taskStatus } from "../js/gojson";
import { urgencyList as goUrgencyList, taskCategory as goTaskCategory, taskStatus as goTaskStatus } from "../js/allList"; 
import { ref, computed, reactive, watch } from "vue";
import { addItem, querylist, putItem } from "../js/indexeddbOperations";
// const dialogTableVisible = ref(false)
const { isAbb, item, packetType } = defineProps({
  isAbb: {
    //新增
    type: Boolean,
    default: true,
  },
  packetType: {
    //新增
    type: String,
    default: '',
  },
  item: {
    //新增
    type: Object,
    default: () => {
      return {
        title: '',
        type: '',
        time: '',
        manDay: '',
        executor: '',
        importance: '',
        starTime: '',
        summary: '',
        progress: 0,
        id: '',
        packetType: '',
      } as cardType
    },
  }
});
const dialogTableVisible = defineModel({ type: Boolean });
watch(dialogTableVisible, () => {
  if (dialogTableVisible.value && !isAbb) {
    form.value = item as cardType
  } else if (dialogTableVisible.value) {
    form.value = {
      title: null,
      type: null,
      time: null,
      manDay: null,
      executor: null,
      importance: null,
      starTime: null,
      summary: null,
      progress: 0,
      id: uuid(32),
      packetType: packetType ? packetType : null,
    } as cardType
  }

})
// console.log(isAbb)
const formLabelWidth = 150;
const form = ref<cardType>({
  title: null,
  type: null,
  time: null,
  manDay: null,
  executor: null,
  importance: null,
  starTime: null,
  summary: null,
  progress: 0,
  id: uuid(32),
  packetType: "0",
});


const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules<cardType>>({
  title: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
  type: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],

  time: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  starTime: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  manDay: [
    {
      required: true,
      message: "Please select a location",
      trigger: "change",
    },
  ],
  executor: [
    {
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  importance: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  summary: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  progress: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});
import { useCounterStore } from '../stores/counter'
const pinias = useCounterStore()

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // console.log("submit!", form.value);
      let arrs: cardType = JSON.parse(JSON.stringify(form.value));
      // console.log("submit!", arrs);
      if (isAbb == true) {
        let res = await addItem(arrs);
        console.log(res, 2655445)
      } else {
        let res = await putItem(arrs);
        console.log(res, 1111111)
      }
      // debugger
      pinias.goRefresh(true)
      resetForm(ruleFormRef.value)
    } else {
      console.log("error submit!", fields);
    }
  });
};


const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  form.value = {
    title: null,
    type: null,
    time: null,
    manDay: null,
    executor: null,
    importance: null,
    starTime: null,
    summary: null,
    progress: 0,
    id: uuid(32),
    packetType: "0",
  };
  dialogTableVisible.value = false;
  formEl.resetFields();
};
let urgencyList= ref<ListType[] >([])
goUrgencyList().then((res ) =>{
  urgencyList.value = res
})
let taskCategory= ref<ListType[] >([])
goTaskCategory().then(res=>{
  taskCategory.value = res
})
let taskStatus= ref<ListType[] >([])
goTaskStatus().then(res=>{
  taskStatus.value = res
})
</script>

<style scoped></style>